<template>
    <i-modal 
        class="picture-modal custom-modal"
        v-model="bPictureModal"
        width="800"
        @on-visible-change="visibleChange">
        <header slot="header">
            <section class="left">
                <template v-if="!bSearch">
                    <h3>图片库</h3>
                    <a>刷新</a>
                </template>
                <template v-else>
                    <h3>搜索结果</h3>
                    <a @click="goBack">返回</a>
                </template>
            </section>
            <section class="right">
                <i-input
                    v-model="searchValue"
                    size="small"
                    icon="ios-search"
                    placeholder="请搜索..."
                    @on-enter="searchPicture()"></i-input>
            </section>
        </header>
        <section class="content">
            <div class="sidebar" v-show="!bSearch">
                <i-menu width="144">
                    <i-submenu name="1">
                        <template slot="title">
                            内容管理
                        </template>
                        <i-menu-item name="1-1">文章管理</i-menu-item>
                        <i-menu-item name="1-2">评论管理</i-menu-item>
                        <i-menu-item name="1-3">举报管理</i-menu-item>
                    </i-submenu>
                    <i-submenu name="2">
                        <template slot="title">
                            内容管理
                        </template>
                        <i-menu-item name="2-1">文章管理</i-menu-item>
                        <i-menu-item name="2-2">评论管理</i-menu-item>
                        <i-menu-item name="2-3">举报管理</i-menu-item>
                    </i-submenu>
                </i-menu>
            </div>
            <div class="list">
                <ul>
                    <li
                        v-for="(item, index) in aPicture"
                        :key="item.id"
                        @click="changeSelect({
                            index,
                            id: item.id
                        })"
                        :class="{search: bSearch}">
                        <figure>
                            <div class="img-section">
                                <div class="select" v-show="item.bChecked">
                                    <span class="icon">
                                        <i-icon
                                            type="ios-checkmark-empty"
                                            color="#fff"
                                            size="32">
                                        </i-icon>
                                    </span>
                                </div>
                                <img :src="item.img" :alt="item.title">
                            </div>
                            <figcaption :title="item.title">{{item.title}}</figcaption>
                        </figure>
                    </li>
                </ul>
            </div>
        </section>
        <footer slot="footer">
            <i-page
                show-elevator
                :total="20">
            </i-page>
            <div class="button-group">
                <i-button type="success">上传</i-button>
                <i-button type="info" @click="confirmSelect()">确认选择</i-button>
            </div>
        </footer>
    </i-modal>
</template>
<script>
// mapActions, mapState
import { mapActions, mapState } from 'vuex'

export default {
    name: 'picture-modal',
    data() {
        return {
            /**
             * 是否搜索
             *
             * @type {Boolean}
             */
            bSearch: true,
            /**
             * 搜索关键词
             *
             * @type {String}
             */
            searchValue: '',
            /**
             * 图片库列表
             *
             * @type {Array.<Object>}
             */
            aPicture: [
                {
                    id: 1,
                    img:
                        'https://cdn.dribbble.com/users/1158144/screenshots/4020266/onboarding_period_tracker02.jpg',
                    title: 'Period Tracker Onboarding',
                    bChecked: false
                },
                {
                    id: 2,
                    img:
                        'https://cdn.dribbble.com/users/797459/screenshots/4020438/___800.png',
                    title: 'Owl in the forest',
                    bChecked: false
                },
                {
                    id: 3,
                    img:
                        'https://cdn.dribbble.com/users/797459/screenshots/4020438/___800.png',
                    title: 'Owl in the forest',
                    bChecked: false
                },
                {
                    id: 4,
                    img:
                        'https://cdn.dribbble.com/users/797459/screenshots/4020438/___800.png',
                    title: 'Owl in the forest',
                    bChecked: false
                },
                {
                    id: 5,
                    img:
                        'https://cdn.dribbble.com/users/797459/screenshots/4020438/___800.png',
                    title: 'Owl in the forest',
                    bChecked: false
                },
                {
                    id: 6,
                    img:
                        'https://cdn.dribbble.com/users/797459/screenshots/4020438/___800.png',
                    title: 'Owl in the forest',
                    bChecked: false
                },
                {
                    id: 7,
                    img:
                        'https://cdn.dribbble.com/users/797459/screenshots/4020438/___800.png',
                    title: 'Owl in the forest',
                    bChecked: false
                },
                {
                    id: 8,
                    img:
                        'https://cdn.dribbble.com/users/797459/screenshots/4020438/___800.png',
                    title: 'Owl in the forest',
                    bChecked: false
                },
                {
                    id: 9,
                    img:
                        'https://cdn.dribbble.com/users/797459/screenshots/4020438/___800.png',
                    title: 'Owl in the forest',
                    bChecked: false
                },
                {
                    id: 10,
                    img:
                        'https://cdn.dribbble.com/users/797459/screenshots/4020438/___800.png',
                    title: 'Owl in the forest',
                    bChecked: false
                },
                {
                    id: 11,
                    img:
                        'https://cdn.dribbble.com/users/797459/screenshots/4020438/___800.png',
                    title: 'Owl in the forest',
                    bChecked: false
                },
                {
                    id: 12,
                    img:
                        'https://cdn.dribbble.com/users/797459/screenshots/4020438/___800.png',
                    title: 'Owl in the forest',
                    bChecked: false
                }
            ],
            /**
             * 计算限制的个数
             *
             * @type {Number}
             */
            computedLimit: 0
        }
    },
    computed: {
        bPictureModal: {
            get() {
                return this.$store.state.modal.bPictureModal
            },
            set(val) {
                this.isModal({ bShow: val, modalKey: 'bPictureModal' })
            }
        },
        ...mapState('pictureModal', ['limit'])
    },
    methods: {
        ...mapActions(['isModal']),
        ...mapActions('pictureModal', ['setPictureSel']),
        /**
         * 点击修改选中状态  根据 limit 来断定可选择的个数
         *
         * @param {Number} index - 当前索引
         */
        changeSelect({ index, id }) {
            if (this.limit > 1) {
                if (!this.aPicture[index].bChecked) {
                    if (this.computedLimit >= this.limit) {
                        this.$Message.warning(
                            `最多可添加 <strong>${this.limit}</strong> 张图片`
                        )
                    } else {
                        this.aPicture[index].bChecked = true
                        this.computedLimit++
                    }
                } else {
                    this.aPicture[index].bChecked = false
                    this.computedLimit--
                }
            } else {
                this.aPicture.forEach(item => {
                    item.bChecked = false
                })
                this.computedLimit = 1
                this.aPicture[index].bChecked = true
            }
        },
        /**
         * 确认选择
         */
        confirmSelect() {
            let aPictureSel = this.aPicture.filter(item => item.bChecked)
            if (this.computedLimit > 0) {
                this.setPictureSel({
                    // 将当前选中的合集赋值到store中
                    aPictureSel
                })
                this.isModal({
                    // 关闭 picture modal
                    modalKey: 'bPictureModal',
                    bShow: false
                })
                this.computedLimit = 0 // 个数清零
                this.aPicture.forEach(item => {
                    item.bChecked = false
                })
            } else {
                this.$Message.warning('请至少选择一张图片或取消操作')
            }
        },
        /**
         * 返回图片库
         */
        goBack() {
            this.bSearch = false
        },
        /**
         * 显示/隐藏时触发
         */
        visibleChange(visible) {
            if (visible) {
                this.bSearch = false
            }
        },
        /**
         * 搜索
         */
        searchPicture() {
            let searchValue = this.searchValue
            if (searchValue.length > 0) {
                console.log(searchValue)
                this.bSearch = true
            }
        }
    }
}
</script>
<style lang="less" scoped>
@import '~@/assets/style/theme/index';
.picture-modal {
    header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        h3 {
            font-size: 15px;
            margin-right: 0.5rem;
        }
        .left {
            h3,
            a {
                display: inline-block;
            }
        }
        .right {
            margin-right: 24px;
        }
    }
    section.content {
        height: 518px;
        display: flex;
    }
    .ivu-modal-body {
        padding: 0;
    }
    footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .sidebar {
        width: 144px;
        height: 100%;
        overflow-y: auto;
        display: inline-block;
    }
    .list {
        flex: 1;
        padding: 1%;
        ul {
            li {
                display: inline-block;
                width: 24.6%;
                padding: 1%;
                margin: 0.2%;
                box-sizing: border-box;
                border: 2px solid #fff;
                position: relative;
                background: @table-thead-bg;
                cursor: pointer;
                figcaption {
                    width: 100%;
                    overflow: hidden; /*超出部分隐藏*/
                    white-space: nowrap; /*不换行*/
                    text-overflow: ellipsis; /*超出部分文字以...显示*/
                }
                img {
                    max-width: 100%;
                    max-height: 100%;
                }
                .select {
                    position: absolute;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    border: 2px solid @primary-color;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    .icon {
                        display: block;
                        width: 32px;
                        height: 32px;
                        background: @primary-color;
                        border-radius: 100%;
                        text-align: center;
                    }
                }
                &:hover {
                    border-color: @primary-color;
                }
                .img-section {
                    height: 130px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }
                &.search {
                    width: 19.6%;
                    .img-section {
                        height: 126px;
                    }
                }
            }
        }
    }
}
</style>